<template>
  <transition name="fadeIn">
    <div class="tip">
      <p>{{ props.text }}</p>
      <button
        class="config"
        @click="YES"
        @mouseenter="cantForChange"
        @mouseleave="rePlay"
      >
        <transition name="fadeIn">
          <span>{{ cantChange ? "确认" : "(谨慎)" }}</span>
        </transition>
      </button>
      <button class="cancel" @click="NO">取消</button>
    </div>
  </transition>
</template>

<script setup lang="ts">
import { ref, defineProps, defineEmits ,onMounted} from "vue";
const $emit = defineEmits(["config", "cancel"]);
const props = defineProps(["text"]);
const cantChange = ref<boolean>(true);
const cantForChange = () => {
  cantChange.value = false;
};
const rePlay = () => {
  cantChange.value = true;
};
const YES = () => {
  $emit("config");
};
const NO = () => {
  $emit("cancel");
};
</script>

<style lang="scss" scoped>
@import "../css/comment/animate.css";
.tip {
  position: absolute;
  left: 0;
  top: -230px;
  bottom: 0;
  right: 0;
  margin: auto;
  width: 400px;
  height: 250px;
  background-color: rgba(255, 255, 255);
  text-align: center;
  border-radius: 15px;
  z-index: 99999;
  p {
    margin-top: 80px;
    font-size: 20px;
    color: #f56c6c;
  }
  .config {
    background-color: #f56c6c;
    color: #ffffff77;
    font-weight: 400;
    transition: all 0.2s;
    &:hover {
      // background-color: lighten(#ea3323,10%);
      box-shadow: 0 0 5px 0 #f56c6c;
    }
  }
  .cancel {
    background-color: #67c23a;
    font-weight: 400;
    transition: all 0.3s;
    &:hover {
      // background-color:lighten(springgreen,20%);
      box-shadow: 0 0 5px 0 #67c23a;
    }
  }
  button {
    width: 25%;
    outline: none;
    height: 35px;
    border: none;
    border-radius: 5px;
    margin: 25px 30px;
  }
}
</style>
